<template>
	<div class="credit">
		<div class="classIndex_h">
			<span>学生学分</span>
		</div>
		<!--  -->
		<div class="classNotice_search">
			<div class="credit_class">
				<template>
					<el-select filterable v-model="class_id" @change="changSelected" placeholder="请选择">
						<el-option v-for="item in classList" :key="item.id" :label="item.org_tre_name" :value="item.id">
						</el-option>
					</el-select>
				</template>
			</div>
			<el-input class="classNotice_sc" placeholder="名字" prefix-icon="el-icon-search" v-model="keyword" @change="changSelected">
			</el-input>
			<el-button class="fr" type="primary" @click="downloadMater" v-preventReClick v-if="creditList.length !== 0">导出学分</el-button>
		</div>
		<div class="resourceAudit" v-loading="loading">
			<template  v-if="creditList.length !== 0" >
				<el-table border :data="creditList">
					<el-table-column prop="uname" align='center' label="学生名称" width="100" show-overflow-tooltip>
					</el-table-column>
					<el-table-column align='center' prop="class_name" label="班级" width="180" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="sum_video" align='center' label="观看视频条数" width="120" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="sum_score" align='center' label="所获学分" width="99" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="createtime" align='center' label="最后学习时间" width="200" show-overflow-tooltip>
					</el-table-column>
				</el-table>
			</template>
			<!--  -->
			<div class="pageBox" v-if="total_number > page_size">
				<el-pagination @current-change="change_page" :page-size="page_size" :current-page="page_index" layout="prev, pager, next" :total="total_number">
				</el-pagination>
			</div>
		</div>
		<div class="dependent" v-if="placeholder">
			<i class="ipm image_nofound"></i>
			<p>
				还没发现任何相关的内容哦~
			</p>
		</div>
	</div>
</template>
<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
	name: '',
	data() {
		return {
			keyword: '',
			/*关键字*/
			class_id: '',
			/*班级id*/
			classList: [],
			/*班级列表*/
			creditList: [],
			/*学分列表*/
			exportList: [],
			/*下载所要的列表*/
			className: '',
			/*下载所要的班级命名*/
			page_size: this.$g.page_size,
			page_index: 1,
			total_number: 0,
			placeholder: false,
			loading: true,

		}
	},
	created() {
		this.getClass()
	},
	methods: {
		/**
		 * 根据用户获取所在的班级数据
		 * @DateTime 2020-03-06T11:30:34+0800
		 * @return   {[type]}                 [description]
		 */
		getClass() {
			let success = (res => {
				let data = res.data;
				this.classList = data;
				if (this.classList.length === 0) { return }
				if (this.classList.length != 0) {
					this.class_id = this.classList[0].id;
				}
				this.classList.filter(item => item.org_tre_name = item.org_tre_name.substring(4, 15))
				this.getCreditList();
			});
			this.$ajax({
				url: 'api/org/class_userid',
				method: 'get',
				params: {
					user_id: this.$g.user_id,
				},
				func: { success: success }
			})
		},
		/**
		 * 学分列表
		 * @DateTime 2020-03-06T11:31:10+0800
		 * @return   {[type]}                 [description]
		 */
		getCreditList() {
			let success = (res => {
				let data = res.data;
				this.creditList = data.data

				this.loading = false
				this.placeholder = this.creditList.length === 0 ? true : false
				if (this.creditList.length === 0) { return }

				this.total_number = data.data_sum;
				this.page_index = parseInt(data.page_index);
				this.className = this.creditList[0].class_name


			});
			this.$ajax({
				url: 'api/video/get_student_score',
				method: 'get',
				params: {
					page_index: this.page_index,
					paga_size: this.page_size,
					classid: this.class_id,
					keywords: this.keyword
				},
				func: { success: success }
			})
		},
		//搜索
		changSelected() {
			this.page_index = 1;
			this.getCreditList()
		},
		//分页
		change_page(val) {
			this.page_index = val;
			this.getCreditList()
		},
		//下载列表
		downloadMater() {
			this.exportList = []
			const defaultCellStyle = { font: { name: "Verdana", sz: 14, color: "FF00FF88" }, fill: { fgColor: { rgb: "FFFFAA00" } } };
			const wopts = { bookType: 'xlsx', bookSST: false, type: 'binary', defaultCellStyle: defaultCellStyle, showGridLines: false };
			const wb = { SheetNames: ['Sheet1'], Sheets: {}, Props: {} };
			if (this.creditList.length === 0) {

				this.$message.error('还没发现任何相关的内容哦~,无法下载相关内容');
				return
			}

			for (let i = 0; i <= this.creditList.length - 1; i += 1) {
				this.exportList.push({
					"学生名称": this.creditList[i].uname,
					"班级": this.creditList[i].class_name,
					"观看视频条数": this.creditList[i].sum_video,
					"所获学分": this.creditList[i].sum_score,
					"最后学习时间": this.creditList[i].createtime
				});
			}
			wb.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(this.exportList)

			//创建二进制对象写入转换好的字节流
			let tmpDown = new Blob([this.s2ab(XLSX.write(wb, wopts))], { type: "application/octet-stream" });
			FileSaver.saveAs(tmpDown, `${this.className}学分记录.xlsx`);
		},
		//字符串转字符流
		s2ab(s) {
			if (typeof ArrayBuffer !== 'undefined') {
				var buf = new ArrayBuffer(s.length);
				var view = new Uint8Array(buf);
				for (let i = 0; i != s.length; i += 1) {
					view[i] = s.charCodeAt(i) & 0xFF;
				}
				return buf;
			} else {
				var buf = new Array(s.length);
				for (let i = 0; i != s.length; i += 1) {
					buf[i] = s.charCodeAt(i) & 0xFF;
				}
				return buf;
			}
		}
	}
}
</script>